/**
 * 部门用能=>用能概况=>日部门用能占比统计排名横向柱状图
 *
 */
import * as React from "react";
import ReactEcharts from "echarts-for-react";
export interface LineChartToDateProportionProps {
  dataSouce: any;
  energyType: number;
}

export interface LineChartToDateProportionState {}

class LineChartToDateProportion extends React.Component<
  LineChartToDateProportionProps,
  LineChartToDateProportionState
> {
  private option: any = {};
  private dataSouce = null;
  private energyType: number = 1;
  render() {
    let { option } = this;
    return (
      <>
        <div className="wy_card">
          <div className="wy_card_tit">日部门用能占比统计排名</div>
          <div className="wy_card_body">
            <ReactEcharts
              option={option}
              notMerge={true}
              lazyUpdate={true}
              style={{ height: 314 }}
              // theme="dark"
              // theme="light"
            />
          </div>
        </div>
      </>
    );
  }
  /**钩子函数 */
  componentDidMount() {
    this.init(this.props);
    if (this.dataSouce) {
      this.option = this.getWarnOption(this.dataSouce); //变更echarts
    }
  }
  //props拦截控制刷新
  shouldComponentUpdate(newProps, newState) {
    if (newProps.dataSouce !== this.props.dataSouce) {
      this.dataSouce = newProps.dataSouce;

      this.forceUpdate();
    }
    if (
      newProps.energyType !== this.props.energyType //用能类型更新
    ) {
      this.energyType = newProps.energyType;
      this.option = this.getWarnOption(this.dataSouce);
      this.forceUpdate();
    }
    return true;
  }
  //初始化
  init(props) {
    let { dataSouce } = props;
    this.dataSouce = dataSouce;
    this.forceUpdate();
  }
  //获取echart对象
  getWarnOption(dataSouce: any) {
    let str = this.energyType === 1 ? "kW·h" : "t";
    let { lastYearList, thisYearList, names } = dataSouce;

    lastYearList = lastYearList.map((item) => {
      return item ? item : 0;
    });
    thisYearList = thisYearList.map((item) => {
      return item ? item : 0;
    });
    return {
      title: {
        // text: "世界人口总量",
        // subtext: "单位：kW·h",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: { bottom: 10, left: "center", data: ["本年", "去年"] },
      color: ["#1890FF", "#5AD8A6"],
      grid: {
        left: "3%",
        containLabel: true,
      },
      xAxis: {
        type: "value",
        show: false,
        axisLine: {
          lineStyle: {
            color: "#B7B7B7",
          },
        },
      },
      yAxis: {
        name: "单位：" + str,
        nameTextStyle: {
          color: "#545658",
        },
        splitLine: {
          //网格线
          show: true,
          lineStyle: {
            color: "#ECECEC",
          },
        },
        axisLine: {
          lineStyle: {
            color: "#B7B7B7",
          },
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#1890FF", //更改坐标轴文字颜色
          },
        },
        type: "category",
        data: names,
      },
      series: [
        {
          name: "本年",
          type: "bar",
          data: thisYearList,
        },
        {
          name: "去年",
          type: "bar",
          data: lastYearList,
        },
      ],
    };
  }
}

export default LineChartToDateProportion;
